<template>
  <a-dropdown :popup-max-height="false" trigger="hover">
    <div class="z_dropdown_wrap">
      <a-avatar
        :size="36"
        image-url="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
      >
      </a-avatar>
      <span class="dropdown_username">{{ userStore.userInfo.username }}</span>
      <icon-down />
    </div>
    <!-- <a-button>No Max Height </a-button> -->
    <template #content>
      <a-doption
        v-for="item in dropList"
        :key="item.value"
        @click="handleClick(item.value)"
      >
        {{ item.title }}
      </a-doption>
    </template>
  </a-dropdown>
</template>

<script lang="ts" setup>
import { ref, reactive, toRef } from "vue";
import type { DropItem } from "./index";
import { useRouter } from "vue-router";
import { userStoreModel } from "@/stores/user/index.ts";
import { storeToRefs } from "pinia";
const userStore = userStoreModel();
const router = useRouter();

const dropList = reactive<DropItem[]>([
  { title: "个人中心", value: "UserInfo" },
  { title: "退出登录", value: "Logout" },
]);

const handleClick = (url: string) => {
  console.log(url);

  if (url === "Logout") {
    userStore.logOut();
    router.replace({ name: "Login" });
    // userStore.userInfo.role = 3;
    return;
  }
  router.push({ name: url });
};
</script>
<style lang="less">
.z_dropdown_wrap {
  cursor: pointer;
  display: flex;
  align-items: center;
  .dropdown_username {
    margin: 0 4px 0 8px;
  }
  svg {
    margin-right: 0 !important;
  }
}
</style>
